<!--  推广发布  -->

<template>
	<view class="release">

		<view>
			<u-dropdown @open="open" ref='uDropdown'>
				<u-dropdown-item v-model="item.value" :title="item.name" v-for="(item,index) in valueList"
					:key='index' />
			</u-dropdown>
		</view>

		<view class="">
			<!-- 全选 -->
			<view class="selee-all">
				<u-checkbox-group @change="onSelecTall">
					<u-checkbox v-model="seleAll.checked" :name="seleAll.name">全选</u-checkbox>
				</u-checkbox-group>
			</view>

			<view class="release_item">
				<u-checkbox-group @change="onChoice" ref='checkboxList'>
					<view class="release_list">
						<view class="release_list_item" :style="{'backgroundColor':item.bgColor}"
							v-for="(item,index) in dataList" :key='index'>
							<view class="release_l_check">
								<u-checkbox v-model="item.checked" :name="item.name" :disabled="item.disabled" />
							</view>
							<view class="release_item_tg">
								<view class="u-m-b-10  release_item_tg-name u-line-1" :style="{'color':item.color}">
									{{item.name}}
								</view>
								<view class="release_item_tg-count u-line-1">{{item.count}}</view>
							</view>
						</view>
						<!-- 占位 -->
						<view class="release_list_item" style="opacity: 0;"
							v-for="(item,index) in 3 - dataList.length % 3" :key='index'></view>
					</view>
				</u-checkbox-group>
			</view>
		</view>
		<view class="go-tg">
			<view class="go-tg-item" @click="goEdit">
				立即推广
			</view>
		</view>
		<!-- 底部设配 -->
		<view class="sp-bottom"></view>
		<!-- 		<view class="list_message">
			<u-empty text="暂无数据" mode="list"></u-empty>
		</view> -->
		<u-select :mask-close-able='false' v-model="show" @cancel='cancel' :list="list" @confirm="confirm">
		</u-select>

		<u-picker :mask-close-able='false' mode="time" @cancel='cancel' v-model="showTime" @confirm="onPicker">
		</u-picker>
		<u-popup v-model="showTS" z-index='66' mode='center' width="500" :mask-close-able='false' border-radius="15">
			<view class="time-box">
				<view class="time-box-item" @click="onTime(1)">
					<view class="">开始时间：</view>
					<view class="time-box-item-sele">{{form.start_date?form.start_date:'请选择时间'}}</view>
				</view>
				<view class="time-box-item" @click="onTime(2)">
					<view class="">结束时间：</view>
					<view class="time-box-item-sele">{{form.end_date?form.end_date:'请选择时间'}}</view>
				</view>
				<view class="time-box-sele">
					<view class="time-box-item-btn" @click="onTimeCheck">
						确定
					</view>
					<view class="time-box-item-btn" @click="onTimeCancel">
						重置返回
					</view>
				</view>
			</view>
		</u-popup>
		<sww-login />
	</view>
</template>


<script>
	import {
		pagingMixin
	} from '@/mixins/sysPaging.js'
	export default {
		mixins: [pagingMixin],
		data() {
			return {
				showTS: false,
				show: false,
				showTime: false,
				timeType: 1, //判断当前点击的是开始时间还是结束时间 1开始 2结束
				selectType: 1, //判断当前点击的是地区还是性别 1地区 2性别
				seleAll: {
					name: 'all',
					checked: false,
					disabled: false
				},
				paramsData: {}, //推广编辑页面所需要的的数据
				list: [], //地区
				sexList: [ //性别
					{
						label: '全部',
						value: -1,
					},
					{
						label: '保密',
						value: 0,
					},
					{
						label: '男',
						value: 1,
					},

					{
						label: '女',
						value: 2,
					},
				],
				form: {
					sex: '',
					area: '',
					start_date: '',
					end_date: '',
					release_tag: ''
				},

				valueList: [{
						name: '地区',
						value: 0
					},
					{
						name: '性别',
						value: 1
					},
					{
						name: '时间',
						value: 2
					},
				],
				color: [{
					color: '#63d6ff',
					bgColor: '#ecfaff'
				}, {
					color: '#ffa5e6',
					bgColor: '#fff6fc'
				}, {
					color: '#fb817c',
					bgColor: '#fdeded'
				}, {
					color: '#9989ff',
					bgColor: '#f6f5ff'
				}, {
					color: '#35caff',
					bgColor: '#d8f5ff'
				}, {
					color: '#42f3b3',
					bgColor: '#e6fff6'
				}, ]

			}
		},
		computed: {
			initParams() {
				let params = JSON.parse(JSON.stringify(this.form))

				for (let i in params) {
					if (params[i] == '' && !params[i] && params[i] !== 0) {
						delete params[i]
					}

					if (params['area'] == '全部') delete params['area']
				}
				delete params.release_tag
				return params
			}
		},
		methods: {
			initPage() {
				this.$nextTick(function() {
					this._init_data('GetProductExtension', {
						pk_id: this.vuex_business.pk_id,
						...this.initParams
					}, {
						keyNameData: 'list',
						dataOtherName: 'bean',
						callBack: (res) => {
							let color;
							let bgColor;
							let item;
							return res = res.map(el => {
								if (el.count <= 0) { //数量为零的就不能选择
									el.disabled = true
								}
								item = this.color[Math.ceil(Math.random() * 5)]
								bgColor = item.bgColor
								color = item.color
								el.checked = false
								el.bgColor = bgColor
								el.color = color
								return el
							})
						}
					})
				})
			},
			open(index) {
				if (index == 2) {
					this.showTS = true
					return
				}
				if (index == 0) {
					this.initOption()
					this.selectType = 0
				} else if (index == 1) {
					this.list = this.sexList
					this.selectType = 1
				}
				this.show = true
			},

			onTime(index) {
				this.timeType = index
				this.showTime = true
			},

			goEdit() {
				let form = JSON.parse(JSON.stringify(this.form))
				if (!form.release_tag) {
					this.$toast('至少选择一条标签')
					return
				}
				for (let i in form) { //过滤空值
					if (form[i] == '' && !form[i] && form[i] !== 0) {
						delete form[i]
					}
				}

				form.bean = this.dataOther

				this.paramsData = form
				this.$to('/package/system/share/trafficShare/edit/index')
			},

			confirm(item) {
				let {
					selectType
				} = this
				let value = item[0].value
				let dataName = selectType == 0 ? 'area' : 'sex'
				this.form[dataName] = value
				this.$refs.uDropdown.close();
				this.show = false
				this.initPage()
			},



			cancel() {
				this.$refs.uDropdown.close();
			},
			onSelecTall(e) {
				if (!this.dataList[0]) {
					this.$toast('最少有一条数据')
					return
				}
				let seleData = []
				// 全选反选过滤 count小于零的
				this.dataList.filter(ele => {
					return ele.count > 0
				}).map(el => {
					if (e[0]) {
						seleData.push(el.name)
						el.checked = true
					} else {
						el.checked = false
					}
				})
				this.form.release_tag = seleData[0] ? seleData.join(',') : ''
			},

			onTimeCheck() {
				let {
					start_date,
					end_date
				} = this.form
				if (start_date && end_date) {
					this.$refs.uDropdown.close();
					this.showTS = false
					this.initPage()
					return
				}
				this.$toast('请选择开始与结束时间')
			},

			onTimeCancel() {
				this.$refs.uDropdown.close();
				this.showTS = false
				this.$set(this.form, 'start_date', '')
				this.$set(this.form, 'end_date', '')
			},

			onPicker(e) {
				let time = `${e.year}-${e.month}-${e.day}`
				let dataName = this.timeType == 1 ? 'start_date' : 'end_date'
				this.$set(this.form, dataName, time)
			},

			onChoice(e) {
				this.form.release_tag = e[0] ? e.join(',') : ''
			},

			initOption() {
				// 地区选择
				let adressOption = [
					'全部',
					'天津',
					'上海',
					'重庆',
					'河北',
					'山西',
					'辽宁',
					'吉林',
					'黑龙',
					'江苏',
					'浙江',
					'安徽',
					'福建',
					'江西',
					'山东',
					'河南',
					'湖北',
					'湖南',
					'广东',
					'海南',
					'四川',
					'贵州',
					'云南',
					'陕西',
					'甘肃',
					'青海',
					'台湾',
					'内蒙',
					'广西',
					'西藏',
					'宁夏',
					'新疆',
					'香港',
					'澳门',
				]
				this.list = adressOption.map((el) => {
					return {
						value: el,
						label: el,
					}
				})
			},

		}
	}
</script>

<style lang='scss' scoped>
	.release {
		/* padding-bottom: 70px; */
	}

	.flex-c-c {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.selee-all {
		display: flex;
		justify-content: flex-end;
		margin: 35rpx 0;
	}

	.release_item {
		padding: 0 34rpx 100rpx;
		box-sizing: border-box;
	}

	.release_list {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.release_list_item {
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		width: calc(100% / 3 - 13rpx);
		height: 216rpx;
		background: #ECFAFF;
		border-radius: 8rpx;
		margin-bottom: 24rpx;
	}

	.release_l_check {
		position: absolute;
		top: 20rpx;
		right: -20rpx;
	}

	.release_item_tg {
		width: 100%;
		text-align: center;
		padding: 0 20rpx;
	}

	.release_item_tg-count {
		color: #ccc;
	}

	.release_item_tg-name {
		font-size: 30rpx;
	}

	.go-tg-item {
		width: 700rpx;
		height: 90rpx;
		line-height: 90rpx;
		background: #3297EF;
		border-radius: 8rpx;
		margin: 0 auto;
	}

	.go-tg {
		position: fixed;
		bottom: 0;
		padding-bottom: env(safe-area-inset-bottom);
		left: 0;
		width: 100%;
		text-align: center;
		font-size: 30rpx;
		font-weight: 500;
		color: #FFFFFF;
		background-color: #ffffff;
	}

	.sp-bottom {
		margin-top: 130rpx;
		padding-bottom: env(safe-area-inset-bottom);
		width: 100%;
		background-color: #fff;
	}

	.time-box {
		display: flex;
		flex-direction: column;
		padding: 30rpx;
		box-sizing: border-box;
		justify-content: space-between;
	}

	.time-box-item {
		display: flex;
		align-items: center;
		color: #999;
		margin: 20rpx 0;
	}

	.time-box-item-sele {
		text-align: center;
		margin-left: 20rpx;
		width: 250rpx;
		border: 1rpx solid #999;

		padding: 5rpx 10rpx;
		font-size: 22rpx;
	}

	.time-box-sele {
		display: flex;
		justify-content: space-between;
	}

	.time-box-item-btn {
		width: calc(50% - 15rpx);
		text-align: center;
		height: 50rpx;
		line-height: 50rpx;
		border: 1rpx solid #999;
		margin: 30rpx auto 0;
		font-size: 25rpx;
	}
</style>
